<template>

	<div>

		<div>
			<el-form :inline="true">
				<el-form-item>
					<el-input
							v-model="searchForm.keyValues"
							placeholder="关键字搜索"
							clearable
					>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="searchForm.title" placeholder="标签">
						<el-option label="安全" value="1"></el-option>
						<el-option label="娱乐" value="2"></el-option>
						<el-option label="游戏" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker
							v-model="searchForm.time"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button @click="getUserList">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-refresh"  type="primary" @click="resetQuery">重置</el-button>
				</el-form-item>

			</el-form>
		</div>

		<div style="margin-top: 5px;margin-bottom: 10px;border-top:1px solid #eee;"></div>

		<div style="border-bottom:1px solid #eee;">
			<el-button type="primary"  class="el-icon-edit" size="small" style="margin-bottom: 10px" @click="addInvitation()">我要发帖</el-button>
			<el-button style="float:right" class="el-icon-sort" type="text" @click="sortPage()">{{sortType}}</el-button>
		</div>


		<div style="margin-top: 5px;margin-bottom: 10px"></div>

		<el-skeleton>
			<template slot="template">

				<div v-for="(item,index) in tableData" :key="index" style="margin-bottom: 10px;">

					<el-card>
						<div style="margin-left: 20px;">
<!--							<div >{{item.userName}}&nbsp;于&nbsp;{{item.createdAt}} 发布</div>-->
							<div ><span style="font-size: 28px">{{item.tile}}</span> <span style="float:right;font-size: 14px;opacity:0.4">{{item.userName}}&nbsp;于&nbsp;{{item.createdAt}} 发布</span></div>
							<div style="margin-top: 8px">
								<el-tag size="medium" type="success" style="font-family: '楷体'">{{item.messageType | getMessageType }}</el-tag>
							</div>
							<div class="description_overflow">
								<div class="description_artical" v-if="descriptionLength && item.message && item.message.length >= 300" style="text-indent: 2em;margin-top: 8px">
									{{item.message&&item.message.slice(0,300) + '...'}}<span class="texts" @click="descriptionLength=false, expanded=true">阅读全文<i class='el-icon-arrow-down'></i></span>
								</div>
								<div class="description_artical"  v-else style="text-indent: 2em;margin-top: 8px">
									{{item.message}}
								</div>
							</div>
							<div style="margin-top: 10px" >
								<el-button :type="item.like?'info':'primary'" size="small"  plain @click="giveLike(item.id)">点赞{{item.giveLike==null?0:item.giveLike}}</el-button>
								<el-button type="text" @click="reviewHandle(item.id,index)"> {{item.ischecked?'收起评论':item.reviewNum === null ? 0 + '条评论': item.reviewNum + '条评论'}}</el-button>

								<div class="downClose" v-if="!descriptionLength && item.message && item.message.length >= 300">
									<span @click="descriptionLength=true, expanded=false" class="texts" v-if="item.message&& item.message.length >= 300">收起<i class='el-icon-arrow-up'></i></span>
								</div>

								<div class="comment" v-show="item.ischecked">
									<div class="comment_header">
										<span>{{ item.commentlsit.length ? item.commentlsit.length : 0 }}条评论</span>
										<el-button style="float:right" class="el-icon-sort" type="text" @click="replySortPage(item.id,index)">{{replySortType}}</el-button>
<!--										<span class="time_order" :class="timerOrder?'timeColor':'text_normal'"  @click="changeTime"><i class="el-icon-sort"></i> 切换为时间顺序</span>-->
									</div>
									<div class="comment_content">
										<div v-if="item.commentlsit.length>0">
											<div v-for="item in item.commentlsit" :key="item.id" class="comment_item">
												<div class="names">
													<div class="plname">{{item.userName}}</div>
													<div class="pltimer">{{item.createdAt}}</div>
												</div>
												<div class="commont">
													{{item.content}}
												</div>
												<div class="imgLike">
													<img v-if="item.like" src="@/assets/hover.png" alt="" @click="handleApprovel(item.id)">
													<img v-else src="@/assets/normal.png" alt="" @click="handleApprovel(item.id)">
													{{item.giveLike===0?'赞':item.giveLike}}
												</div>
											</div>
										</div>
										<div v-else class="empty">
											暂无评论
										</div>
									</div>
									<div class="viewMore">
										<span v-if="!reviewFlag&&reviewLists.length>0" class="texts"  @click="viewMore(item.id,index)">查看更多</span>
										<span v-if="reviewFlag&&reviewLists.length>0" class="texts_end" ></span>
									</div>
									<div class="comment_footer">
										<el-input v-model="content" placeholder="写下你的评论..." class="comValue"></el-input>
										<el-button @click="remarkHandle(item.id,index)" type="primary" size="mini">提交</el-button>
									</div>
								</div>

							</div>


						</div>
					</el-card>

				</div>
			</template>
		</el-skeleton>

<!--		<div>-->
<!--			<div>{{tableData.userName}}{{tableData.createdAt}} 发布</div>-->
<!--		</div>-->


		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50, 100]"
				:current-page="current"
				:page-size="size"
				:total="total">
		</el-pagination>


		<!--新增对话框-->
		<el-dialog
				title="发贴"
				:visible.sync="dialogVisible"
				width="600px"
				:before-close="handleClose">

			<el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标题"  label-width="100px" prop="tile">
					<el-input placeholder="请输入标题" v-model="editForm.tile" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="帖子类型" label-width="100px" prop="messageType">
					<el-select v-model="editForm.messageType" placeholder="请选择标签">
						<el-option label="安全" value="1"></el-option>
						<el-option label="娱乐" value="2"></el-option>
						<el-option label="游戏" value="3"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="消息内容"   label-width="100px" prop="message">
					<el-input type="textarea"  rows="5" placeholder="请输入内容" v-model="editForm.message" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm('editForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	export default {
		name: "Invitation",
		data() {
			return {
				searchForm: {},
				delBtlStatu: true,

				total: 0,
				size: 10,
				current: 1,

				dialogVisible: false,
				editForm: {

				},
				descriptionLength: true, //判断文字是否超过300
				expanded: false,
				sortType: '按时间排序',
				plState: false, //评论内容状态
				tableData: [],
				reviewLists: [],
				replySortType: '按时间排序',
				content: '',// 评论
				reviewTotals: null, // 评论的页数
				reviewFlag: false, // 控制是否还能点击查看更多
				reviewParams: {
					messageId: '',
					page: 1,
					size: 10,
					sort: 1 // 默认0
				},
				keyType: {
					type: String,
					default: ''
				},
				rules: {
					tile: [
						{required: true, message: '请输入标题', trigger: 'blur'}
					],
					messageType: [
						{required: true, message: '请选择类型', trigger: 'blur'}
					],
					message: [
						{required: true, message: '请输入内容', trigger: 'blur'}
					]
				},

				multipleSelection: [],

				roleDialogFormVisible: false,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				roleForm: {},
				roleTreeData:  [],
				treeCheckedKeys: [],
				checkStrictly: true

			}
		},
		created() {
			this.getUserList()
		},
		methods: {
			//新增帖子
			addInvitation(){
				this.dialogVisible = true
			},
			//点赞
			giveLike(messageId){
				let likeForm = {
					messageId: messageId
				}
				this.$axios.post("/message/giveLike",
						likeForm
				).then(res => {
					this.$message({
						showClose: true,
						message: '点赞成功！',
						type: 'success',
					});
					this.getUserList()
				})
			},
			reviewHandle(id,index){
				console.log(this.tableData,index)
				this.tableData[index].ischecked = !this.tableData[index].ischecked
				this.reviewList(id,index)
				// this.plState =!this.plState
				// // 点击评论展开获取评论内容
				// if(this.plState){
				// 	this.reviewList(id)
				// }
			},
			//评论
			remarkHandle(messageId,index){
				let likeForm = {
					messageId: messageId,
					content: this.content
				}
				this.$axios.post("/message/remarkInvitation",
						likeForm
				).then(res => {
					this.content=''
					this.$message({
						showClose: true,
						message: '评论成功！',
						type: 'success',
					});
					// this.tableData[index].ischecked = !this.tableData[index].ischecked
					this.reviewList(messageId,index)
					// this.getUserList()
				})
			},
			// 查看更多
			viewMore(messageId,index) {

				if(this.reviewParams.size < this.reviewTotals){
					this.reviewFlag = false
					this.reviewParams.size += 10
					this.reviewParams.messageId = messageId
					this.reviewList(messageId,index)
				}else{
					this.reviewFlag = true
				}

			},
			reviewList(id,index){
				let sort = 1
				if(this.replySortType == '按点赞排序'){
					sort = 2
				}
				// let params= {
				// 	sort: sort,
				// 	messageId: id,
				// 	page: this.current,
				// 	size: this.size
				// }

				this.reviewParams.messageId = id
				this.reviewParams.sort = sort

				this.$axios.post("/message/getRemarkList",
					this.reviewParams
				).then(res => {

					this.reviewLists = res.data.data.records
					this.tableData[index].reviewNum = this.reviewLists.length;
					this.tableData[index].commentlsit = this.reviewLists
					this.reviewTotals = res.data.data.total
					// 默认评论状态如果总数小于size 显示加载完毕
					this.reviewTotals <= this.reviewParams.size?this.reviewFlag = true:this.reviewFlag = false
				})
			},
			replySortPage(id,index){
				if(this.replySortType == '按点赞排序'){
					this.replySortType = '按时间排序'
				}else{
					this.replySortType = '按点赞排序'
				}
				this.reviewList(id,index)
			},
			// 点赞评论
			handleApprovel(id){
				let likeForm = {
					replyId: id
				}
				this.$axios.post("/message/giveLikeRemark",
						likeForm
				).then(res => {
					this.$message({
						showClose: true,
						message: '点赞成功！',
						type: 'success',
					});
					this.reviewList()
				})

			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				console.log("勾选")
				console.log(val)
				this.multipleSelection = val;

				this.delBtlStatu = val.length == 0
			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getUserList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getUserList()
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.dialogVisible = false
				this.editForm = {}
			},
			handleClose() {
				this.resetForm('editForm')
			},
			sortPage(){
				if(this.sortType == '按点赞排序'){
					this.sortType = '按时间排序'
				}else{
					this.sortType = '按点赞排序'
				}
				this.getUserList()
			},
			getUserList() {
				console.log(this.searchForm.time)
				let sort = 1
				if(this.sortType == '按点赞排序'){
					sort = 2
				}
				this.$axios.get("/message/page", {
					params: {
						keyValues: this.searchForm.keyValues,
						title: this.searchForm.title,
						sort: sort,
						begTime: this.searchForm.time!=null?this.searchForm.time[0]:null,
						endTime: this.searchForm.time!=null?this.searchForm.time[1]:null,
						page: this.current,
						size: this.size
					}
				}).then(res => {
					res.data.data.records.forEach(item =>{
						this.$set(item,'ischecked',false)
						this.$set(item,'commentlsit',[])
					})

					this.tableData = res.data.data.records;

					this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
				})
			},
			resetQuery() {
				this.searchForm = {},
				this.getUserList();
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/message', this.editForm)
							.then(res => {

								this.$message({
									showClose: true,
									message: '恭喜你，发帖成功',
									type: 'success',
									onClose:() => {
										this.getUserList()
									}
								});

								this.dialogVisible = false
								this.$refs[formName].resetFields();
								this.editForm = {}
								this.getUserList()
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			delHandle(id) {

				var ids = []


				if (id) {
					ids.push(id)
				} else {
					this.multipleSelection.forEach(row => {
						ids.push(row.id)
					})
				}

				console.log(ids)

				this.$axios.post("/invitation/delete", ids).then(res => {
					console.log(res)
					if(res.data.msg == '没有权限删除'){
						this.$message({
							showClose: true,
							message: '没有权限删除',
							type: 'success',
							onClose:() => {
								this.getUserList()
							}
						});
					}else {
						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
							onClose:() => {
								this.getUserList()
							}
						});
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">

	.el-pagination {
		float: right;
		margin-top: 22px;
	}
	.d1{
		background-color: darkgrey;
		/*width: 800px;*/
		height: 100px;
	}
	.texts{
		padding:0 10px;
		font-size: 12px;
		color: #297CFE;
		cursor: pointer;
	}
	.downClose{
		text-align: right;
	}


	.description_overflow{
		padding-top: 8px;
		white-space:pre-wrap;
		.description_artical{
			font-size: 12px;
			color: #222222;
			line-height: 20px;
		}
	}


	.comment{
		margin-top:10px;
		border: 1px solid #DCDCDC;
		font-size: 12px;

		.comment_header{
			padding: 0 15px;
			height: 34px;
			line-height: 34px;
			background: #EFF4FF;
			color: #535D74;
			display: flex;
			justify-content: space-between;
			.time_order{
				cursor: pointer;
			}
			.text_normal{
				color:#297CFE;
			}
		}
		.comment_content{
			padding: 0 15px;
			.comment_item{
				border-bottom: 1px solid #DCDCDC;
				line-height: 27px;
				.names{
					display: flex;
					justify-content: space-between;
					.plname{
						color: #666;
						font-size: 13px;
					}
					.pltimer{
						color:#888888;
						font-size: 12px;
					}
				}
				.imgLike{
					cursor: pointer;
				}
				.commont{
					color:#222;
				}
			}
			.comment_item:last-child{
				border-bottom: none;
			}
			.empty{
				text-align: center;
				font-size: 12px;
				color:#222;
				padding: 10px 0;
			}
		}
		.viewMore{
			text-align: center;
			line-height: 30px;
			.texts_end{
				color:#888888;
			}
		}
		.comment_footer{
			padding: 0 15px;
			height: 60px;
			align-items: center;
			background: #F7F7F7;
			color: #535D74;
			display: flex;
			justify-content: space-between;
			::v-deep(.el-input){
				line-height: 28px;
			}
			.comValue{
				width: calc(100% - 66px);
				height: 28px;

				::v-deep(.el-input__inner){
					height:28px;
					line-height: 28px;
				}
			}
		}
	}



</style>
